<template>
	<div class="hh1" v-bind:class="{active:show}">
		<div class="hhA1">
			<div>
				<ul class="headers">
					<li class="oli" @click="changezh($router)">&#xe697;</li>
					<li>坚果炒货</li>
					<li class="oli1">
						&#xe602;
					</li>
				</ul>
				<ul class="headers1">
					<li>
						<p class="activesort" @click="changezz()" >
							综合
						</p>
						<p class="oli2">
							&#xe65e;
						</p>
					</li>
					<li class="activesort">
						销量优先
					</li>
					<li>
						<p @click="changesx()">
							筛选
						</p>
						<p class="oli3">
							&#xe62a;
						</p>
					</li>
					<li class="oli4" :class="{zxhactive:zxhactives}" @click="zxhactive()">
						<!-- <router-link to='/sortthree/sortzxho'> -->
						&#xe600;
						<!-- </router-link> -->
					</li>
				</ul>
			</div>
		</div>
		
		<sort-one v-show='!zxhactives'></sort-one>
		<sort-fx v-show='zxhactives'></sort-fx>
		<sort-three></sort-three>
		<sort-sx></sort-sx>
	</div>
</template>

<script type="text/javascript">
import sortOne from './two';
import sortThree from './three';
import sortSx from './four';
import sortFx from './fix'
	export default{
		components:{
			sortOne,
			sortThree,
			sortSx,
			sortFx
		},
		data(){
			return {
				zxhactives:false
			}
		},
		methods:{
			changezh(str){
				str.go(-1)
			},
			changezz(){
				this.$store.commit('changex');
			},
			changesx(){
				this.$store.commit('changec');
			},
			zxhactive(){
				this.zxhactives=!this.zxhactives
			}
		},
		computed: {
		// 计算属性
			show(){
				// 当前组件访问仓库(vuex)当中的状态
				return this.$store.state.tree;
			}
		}
	}
</script>

<style type="text/css" scoped>
	.oli{
		font-family: 'iconfont'; 
		color: #ff6900;
		font-size: .9rem;
	}
	
	.oli1{
		font-family: 'iconfont'; 
	}
	.oli2{
		font-family: 'iconfont';
	}
	.oli3{
		font-family: 'iconfont';
	}
	.oli4{
		font-family: 'iconfont';
	}
	.zxhactive{
		color: #ff7900;
	}
	@font-face {
	  font-family: 'iconfont';  /* project id 387317 */
	  src: url('//at.alicdn.com/t/font_387317_weuvzgi9pgl7syvi.eot');
	  src: url('//at.alicdn.com/t/font_387317_weuvzgi9pgl7syvi.eot?#iefix') format('embedded-opentype'),
	  url('//at.alicdn.com/t/font_387317_weuvzgi9pgl7syvi.woff') format('woff'),
	  url('//at.alicdn.com/t/font_387317_weuvzgi9pgl7syvi.ttf') format('truetype'),
	  url('//at.alicdn.com/t/font_387317_weuvzgi9pgl7syvi.svg#iconfont') format('svg');
	}
	@font-face {
	  font-family: 'iconfont';  /* project id 387317 */
	  src: url('//at.alicdn.com/t/font_387317_04xga13pu2138fr.eot');
	  src: url('//at.alicdn.com/t/font_387317_04xga13pu2138fr.eot?#iefix') format('embedded-opentype'),
	  url('//at.alicdn.com/t/font_387317_04xga13pu2138fr.woff') format('woff'),
	  url('//at.alicdn.com/t/font_387317_04xga13pu2138fr.ttf') format('truetype'),
	  url('//at.alicdn.com/t/font_387317_04xga13pu2138fr.svg#iconfont') format('svg');
	}
	@font-face {
	  font-family: 'iconfont';  /* project id 387317 */
	  src: url('//at.alicdn.com/t/font_387317_c0okl7tuwstt9.eot');
	  src: url('//at.alicdn.com/t/font_387317_c0okl7tuwstt9.eot?#iefix') format('embedded-opentype'),
	  url('//at.alicdn.com/t/font_387317_c0okl7tuwstt9.woff') format('woff'),
	  url('//at.alicdn.com/t/font_387317_c0okl7tuwstt9.ttf') format('truetype'),
	  url('//at.alicdn.com/t/font_387317_c0okl7tuwstt9.svg#iconfont') format('svg');
	}
	@font-face {
	  font-family: 'iconfont';  /* project id 387317 */
	  src: url('//at.alicdn.com/t/font_387317_31b04j8oewnx9a4i.eot');
	  src: url('//at.alicdn.com/t/font_387317_31b04j8oewnx9a4i.eot?#iefix') format('embedded-opentype'),
	  url('//at.alicdn.com/t/font_387317_31b04j8oewnx9a4i.woff') format('woff'),
	  url('//at.alicdn.com/t/font_387317_31b04j8oewnx9a4i.ttf') format('truetype'),
	  url('//at.alicdn.com/t/font_387317_31b04j8oewnx9a4i.svg#iconfont') format('svg');
	}

	.hhA1{
		position: fixed;
		left: 0;right: 0;top: 0;
	}
	
	.hh1{
		position: absolute;
		left: 0;right: 0;
		top: 0;
		bottom: 0;
		background: #e5e5e5;
		z-index: 100;
		overflow-y: scroll;
	}
	.hh1.active{
		overflow-y: hidden;
	}
	.headers{
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 1.1732rem;
		border-bottom: #666 solid .01rem;
		background: #fff;
	}
	.headers>li{
		flex: 1 1;
	}
	.headers>li:nth-of-type(1){
		width: 20%;
		margin-left: .23434rem;
	}
	.headers>li:nth-of-type(2){
		width: 70%;
		text-align: center;
		color: #666;
		font-size: .46563rem;
	}
	.headers>li:nth-of-type(3){
		width: 10%;
		display: flex;
		font-size: .63434rem;
		color: #666;
		justify-content: flex-end;
		margin-right: 0.3734rem;
	}
	.headers1{
		background: #fff;
		width: 100%;
		display: flex;
		height: 1.1732rem;
		font-size: .37232rem;
	}
	.headers1>li{
		display: flex;
		width: 28%;
		justify-content: center;
		align-items: center;
	}
	.headers1>li:nth-of-type(4){
		width: 16%;
		height: 60%;
		margin-top: 0.2113rem;
		border-left: .01rem solid;
		font-size: .6232rem;
	}
	.activesort:hover{
		color:  #ff6900;
	}
</style>